<template lang="html">
    <!--此页面需要-->
    <div v-if=!isAdmin>

        <div class="text">
            <input type="text" placeholder="用户名" v-model="username" class="id">
        </div>

        <div class="password">
            <input type="password" placeholder="密码" v-model="password" class="pass">
        </div>

        <div class="right" @click="adminLogin()">登录</div>
        <div class="left" @click="backLogin()">返回</div>
    </div>
    <div class="container" v-else>

        <!--用户的相关信息-->
        <img src="../assets/logo.png" alt="" id="user-img">

        <div id="content">
            <router-link to="userinfo" id="menuleft">用户管理</router-link>


            <div class="header">
                <div>用户昵称</div>
                <div>用户邮箱</div>
                <div>用户电话</div>
                <div>用户密码</div>
                <div>管理员</div>
                <div>修改信息</div>
                <div>删除用户 </div>
            </div>
            <div class="box">
                <div class="cont" v-for="(item,index) in userList" :key="index">
                    <div class="hr"></div>
                    <!-- <div>{{item}}</div> -->
                    <div>{{item.username}}</div>

                    <div>{{item.userMail}}</div>
                    <div>{{item.userPhone}}</div>

                    <div>{{item.password}}</div>

                    <div>{{item.userAdmin}}</div>
                    <div><img src="../assets/change.png" alt="" class="del" @click="dialogFormVisible = true"></div>
                    <div><img src="../assets/del.png" alt="" class="del" @click="del(item)"></div>


                    <!-- <div> -->
                    <!-- <el-button type="text" @click="changeContent">w w </el-button> -->
                    <!-- </div> -->
                </div>
                <el-dialog title="用户信息" :visible.sync="dialogFormVisible" append-to-body>
                    <el-form :model="form">
                        <el-form-item label="用户昵称" :label-width="formLabelWidth">
                            <el-input v-model="form.username" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
                            <el-input v-model="form.usermail" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户电话" :label-width="formLabelWidth">
                            <el-input v-model="form.userphone" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="用户密码" :label-width="formLabelWidth">
                            <el-input v-model="form.userpassword" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="管理员身份" :label-width="formLabelWidth">
                            <el-select v-model="form.userAdmin" placeholder="请选择">
                                <el-option label="管理员" value="1"></el-option>
                                <el-option label="非管理员" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateUser()">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>


    </div>
</template>
<script>
    import axios from 'axios'
    export default {
        name: 'HelloWorld',
        data() {
            return {
                detail: [],
                songurl: "",
                userList: [],
                isAdmin: false,
                dialogFormVisible: false,
                formLabelWidth: '120px',
                form: {
                    username: '',
                    usermail: '',
                    userphone: '',
                    userpassword: '',
                    userAdmin: '',
                    desc: '',
                    resource: '',
                    delivery: false,

                }

            }
        },

        created() {
            // let userId = this.$route.query.id
            // console.log(this.$route);
            this.$http.get('http://localhost:5000/showAllUser').then((data) => {
                // this.detail = data.body.data;
                console.log(data.data.msg)
                this.userList = data.data.msg
            })

        },
        methods: {

            adminLogin: function (event) {
                // console.log(suc);
                this.$http.post('http://localhost:5000/users/adminLogin', {
                    username: this.username,
                    password: this.password
                }).then(data => {
                    this.$message({
                        type: data.body.type,
                        message: data.body.message
                    });
                    if(data.body.status==0){
                        this.isAdmin = true
                        }
                        // console.log(data.body);
                })
            },
            del(item) {
                let name = {
                    username: item.username
                }
                console.log(item);
                this.$confirm('将永久删除该用户, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$http.post('http://localhost:5000/users/del', name).then(data => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // this.$router.go(0)
                        // this.isAdmin = true

                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            updateUser() {
                // let sendDate = {
                //     userName: this.form.username,
                //     userMail: this.form.usermail,
                //     userPhone: this.form.userphone,
                //     userPassword: this.form.userpassword,
                //     userAdmin: this.form.userAdmin
                // }
                // console.log(sendDate);
                this.$http.post('http://localhost:5000/users/userUpdate', {
                    userName: this.form.username,
                    userMail: this.form.usermail,
                    userPhone: this.form.userphone,
                    userPassword: this.form.userpassword,
                    userAdmin: this.form.userAdmin
                }).then(data => {
                    // console.log(this);
                    // console.log(sendDate);
                    this.$message({
                        message: '更新成功',
                        type: 'success'
                    });
                    this.$router.go(0)
                    this.isAdmin = true

                })
                this.dialogFormVisible = false
            },
        }
    }
</script>

<style lang="css" scoped>
    .login {
        width: 1000px;
        height: 500px;
    }


    .text,
    .password {
        position: absolute;
        top: 50px;
        left: 500px;
        width: 340px;
        height: 53px;
        background: rgba(0, 0, 0, 0.3);
        border-radius: 25px;
        margin: 50px 0px;
    }

    .password {
        top: 135px;
    }

    .password span,
    .text span {
        color: rgb(255, 255, 255, 0.5);
        position: absolute;
        right: 20px;
        top: 16px;
        font-size: 14px;
        cursor: pointer;
    }

    input {
        position: absolute;
        left: 0%;
        top: 17%;
        width: 80%;
        height: 64%;
        background: transparent;
        /* border-radius: 5px; */
        font-size: 14px;
        border: none;
        /* border: 2px solid rgba(255, 255, 255, 0.3); */
        color: rgb(255, 255, 255, 0.7);
        padding: 0 7%;
        outline: none;
        letter-spacing: 3px;
    }

    .border {
        /* border: solid 2px rgb(255, 255, 255,0.3); */
        position: absolute;
        left: 2%;
        top: 20%;
        width: 95%;
        height: 55%;
        border-radius: 5px;
    }

    .left {
        position: absolute;
        left: 500px;
        top: 290px;
        background: rgb(0, 0, 0, 0.3);
        width: 55px;
        height: 20px;
        border-radius: 25px;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255, 0.7);
        cursor: pointer;
    }

    .right {
        position: absolute;
        left: 752px;
        top: 290px;
        background: rgb(0, 0, 0, 0.3);
        width: 55px;
        height: 20px;
        border-radius: 25px;
        padding: 15px;
        text-align: center;
        color: rgb(255, 255, 255, 0.7);
        cursor: pointer;
    }

    .boxs {
        position: absolute;
        top: 100px;
        left: 100px;
        color: rgb(255, 255, 255, 0.6);
    }

    .container {
        width: 100%;
        margin: 0 auto;
    }

    #user-img {
        position: absolute;
        width: 100px;
        left: 35px;
    }

    .boxs.id {
        top: 5px;
        font-size: 30px;
        left: 241px;
    }

    .boxs.info {
        left: 241px;
        top: 75px;
        font-size: 18px;
    }

    .boxs.mail {
        left: 241px;
        top: 131px;
    }

    .boxs.phone {
        left: 450px;
        top: 131px;
    }

    #content {
        position: relative;
        left: 12px;
        top: 150px;
        color: rgb(255, 255, 255, 0.8);
        position: absolute;
    }

    #content #menuleft,
    #menuright {
        position: absolute;
        left: 25px;
        top: 0px;
        color: rgb(255, 255, 255, 0.8);
        font-weight: 600;
        font-size: 20px;
        text-decoration: none;
    }



    .hr {
        width: 1000px;
        height: 0px;
        background: rgba(255, 255, 255, 0.3);
    }

    .header {
        position: relative;
        top: 50px;
        height: 50px;
        width: 1200px;
    }

    .header div {
        position: absolute;
    }

    .header div:nth-child(1) {
        left: 3%;
    }

    .header div:nth-child(2) {
        left: 220px;
    }

    .header div:nth-child(3) {
        left: 450px;
    }

    .header div:nth-child(4) {
        left: 670px;
    }

    .header div:nth-child(5) {
        left: 880px;
    }

    .header div:nth-child(6) {
        left: 980px;
    }

    .header div:nth-child(7) {
        left: 1080px;
    }




    .cont {
        position: relative;
        height: 50px;
    }

    .cont div:nth-child(2),
    .cont div:nth-child(3),
    .cont div:nth-child(4),
    .cont div:nth-child(7),
    .cont div:nth-child(8),
    .cont div:nth-child(5),
    .cont div:nth-child(6) {
        position: absolute;
        left: 2.5%;
        padding: 10px;
    }

    .cont div:nth-child(3) {
        left: 210px;
    }

    .cont div:nth-child(4) {
        left: 440px;
    }

    .cont div:nth-child(5) {
        left: 660px;
    }

    .cont div:nth-child(6) {
        left: 880px;
    }

    .cont div:nth-child(7) {
        left: 990px;
    }

    .cont div:nth-child(8) {
        left: 1090px;
    }

    .box {
        position: relative;
        top: 30px;
        height: 240px;
        width: 1200px;
        overflow-y: scroll;
    }

    .del {
        width: 15px;
        position: relative;
        cursor: pointer;
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background-color: rgb(255, 255, 255, 0.7);
    }
</style>